<template>
    <div class="order-list">
      <el-card v-for="order in orders" :key="order.id">
        <h3>订单号：{{ order.id }}</h3>
        <p>下单时间：{{ order.time }}</p>
        <p>总金额：{{ order.totalAmount }}￥</p>
        <p>订单内容：</p>
        <ul>
          <li v-for="(item, index) in order.items" :key="index">
            {{ item.name }} - 数量：{{ item.quantity }} - 单价：{{ item.price }}￥
          </li>
        </ul>
      </el-card>
      <p v-if="!orders.length">没有订单信息</p>
    </div>
  </template>
  
  <script>
  import { mapState } from 'vuex';
  
  export default {
    name: 'OrderList',
    computed: {
      ...mapState(['orders'])
    }
  };
  </script>
  
  <style>

  </style>